<script setup>
import ChatAi from "@/views/ChatAi.vue";
import {reactive} from "vue";
import request from "@/utils/request.js";

const data =reactive({
  historyIndex:[
    {name:"聊天机器人1",chatId:"chat_1759501967000_g4gk0elj6"},
    {name:"聊天机器人1",chatId:"chat_1759501967000_g4gk0elj6"},
    {name:"聊天机器人1",chatId:"chat_1759501967000_g4gk0elj6"},
    {name:"聊天机器人1",chatId:"chat_1759501967000_g4gk0elj6"},
  ],
  currentName:"",
})
const getHistoryList=async()=>{
  try {
    const result = await request.get(`/ai-chat/historyList`);
    data.historyIndex = result.data; // result 是历史消息数组
    console.log('历史对话列表:', data.historyIndex);
  } catch (e) {
    console.error('获取历史对话列表失败:', e);
  }
};
const createNewChat=async()=>{
  const chatId = crypto.randomUUID();
  await request.get(`/ai-chat/newChat/${chatId}`)

}





const handleMessageSent=(prompt)=>{
  console.log('用户发送了消息:', prompt);
}
const handleMessageReceived=(messages)=>{
  console.log('收到消息:', messages);
}
</script>

<template>
  <div class="home">
    <el-container>
      <el-aside>
        <div class="menu">
          <div class="menu-header">
            <div class="title">聊天机器人</div>
            <div class="add-new-chat" >
              <button @click="createNewChat">新增对话</button>
            </div>
          </div>
          <div class="menu-list">
            <el-menu
                default-active="0"
                class="history-index"
                v-if="data.historyIndex.length > 0"
            >
              <el-menu-item
                  :index="index.toString()"
                  v-for="(item, index) in data.historyIndex"
                  :key="index"
              >
                <template #title>
                  <div class="menu-item">
                    <div class="item-name">
                      {{ data.currentName?.name || '未选择聊天' }}
                    </div>
                    <div class="option">
                      <!-- 修改名称 -->
                      <el-button size="small">修改名称</el-button>
                      <!-- 删除对话 -->
                      <el-button size="small" type="danger">删除对话</el-button>
                    </div>
                  </div>
                </template>
              </el-menu-item>
            </el-menu>
          </div>
        </div>
      </el-aside>
      <el-container>
        <el-header>
          <div class="title">
            {{ data.currentName?.name}}
          </div>
        </el-header>
        <el-main>
          <div class="chat-ai-ui">
            <ChatAi
              :chat-id="'chat_1759501967000_g4gk0elj6'"
              :api-base-url="'http://localhost:8080'"
              @message-sent="handleMessageSent"
              @message-received="handleMessageReceived"
            />
          </div>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<style scoped>

</style>